<template>
	<div class="mui-content loginBox" id="login">
		<br>
		<br>
		<div class="logo_wrap">
			<img src="../img/logo.png" alt="" />
			<p class="logo-text">CYHZ</p>
		</div>
		<h1 class="login_tit">欢迎登录！</h1>
		<div class="mui-input-row">
			<label>
				<img src="../img/acon.png" />
			</label>
			<input type="text" v-model="username" class="mui-input-clear" id="username" placeholder="请输入账号">
		</div>
		<div class="mui-input-row">
			<label><img src="../img/clock.png" /></label>
			<input type="password" v-model="password" class="mui-input-password" id="password" placeholder="请输入密码">
		</div>
		<br>
		<div class="mui-content-padded">
			<a id="loginBtn" class="mui-btn mui-btn-block mui-btn-primary" @click="login()">登录</a>
			<div class="link-area bot" style="margin-top:20px;">
			</div>
		</div>
	</div>
</template>
<script>
	import { loginByUsername } from '../apis'
	import { routerJump } from '../utils/functions'
	export default {
		data() {
			return {
				username:"",
				password:""
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				const { username, password } = this
				if (username.trim() === '') return console.log('请输入手机号')
				if (password.trim() === '') return console.log('请输入密码')
				const params = { username, password }
				loginByUsername(JSON.stringify(params))
				.then(res => {
					const { userInfo, token } = res
					localStorage.setItem('token', token)
					localStorage.setItem('userInfo', JSON.stringify(userInfo))
					routerJump('/pages/team')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	body {
		background: #211D1E;
	}

	.mui-btn {
		width: 80%;
		margin-left: 10%;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42;
		position: relative;
		display: inline-block;
		margin-bottom: 0;
		padding: 6px 12px;
		cursor: pointer;
		-webkit-transition: all;
		transition: all;
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;
		-webkit-transition-duration: .2s;
		transition-duration: .2s;
		text-align: center;
		vertical-align: top;
		white-space: nowrap;
		color: #333;
		border: 1px solid #ccc;
		border-radius: 3px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
		background-color: #fff;
		background-clip: padding-box;
	}

	.logo-text {
		color: #c69e62;
		font-size: 20px;
		font-weight: 400;
		margin: 0;
	}

	.mui-input-row {
		width: 90%;
		margin: 0 auto;
		border-radius: 0.5rem;
		background: #2A2624;
		margin-bottom: 10px;
	}

	.mui-content {
		background: #211D1E url(../img/loginbg.png) no-repeat left top;
		background-size: 100%;
		height: calc(100vh - 44px)
	}

	.mui-input-row label {
		text-align: center;
		font-size: 0.28rem;
		width: 20%;
		line-height: 1;
		height: 42px;
		float: left;
	}

	.mui-input-row label img {
		height: 50%;
		margin-top: 18%;
	}

	.mui-input-row label~input {
		width: 80%;
		float: left;
		font-size: 14px;
		height: 42px;
		line-height: 42px;
		color: #C9A460;
	}

	.mui-input-row {
		width: 90%;
		margin: 0 auto;
		border-radius: 0.5rem;
		background: #2A2624;
		margin-bottom: 10px;
	}

	.iconfont {
		color: #4b7ff7;
	}

	.mui-btn-primary {
		border: 0;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		padding: 10px 8px;
		background: -moz-linear-gradient(left, #C9A460 0%, #CC882E 100%);
		background: -webkit-linear-gradient(left, #C9A460 0%, #CC882E 100%);
		background: -o-linear-gradient(left, #C9A460 0%, #CC882E 100%);
		background: -ms-linear-gradient(left, #C9A460 0%, #CC882E 100%);
		background: linear-gradient(to right, #C9A460 0%, #CC882E 100%);
		color: #211D1E;
		font-size: 16px;
	}

	#forgetPassword {
		font-size: 14px;
		color: #7A6542;
		line-height: 35px;
		display: block;
	}

	#reg {
		font-size: 0.26rem;
		color: #C9A460;
	}

	.logo_wrap {
		text-align: center;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.logo_wrap img {
		width: 40%;
	}

	.logo_wrap h3 {
		font-weight: 500;
		font-size: 20px;
		color: #666;
		margin: 0;
		margin-bottom: 30px;
		text-align: center;
	}

	.link-area {
		margin-top: 0;
		overflow: hidden;
		line-height: 36px;
		width: 90%;
		margin: 0 auto;
	}

	.link-area .mui-checkbox {
		width: 60%;
		float: left;
		border-bottom: 0;
		background: none;
		margin: 0;

	}

	.link-area .mui-checkbox.mui-left label {
		width: 54%;
		padding-left: 5px;
		text-align: left;
		line-height: 1.1;
		font-size: 14px;
		color: #C9A460;
	}

	.link-area .mui-checkbox.mui-left input[type='checkbox'] {
		top: 8px;
	}

	.link-area #forgetPassword {
		float: right;
		margin-right: 10px;
	}

	.login_tit {
		font-size: 20px;
		color: #C9A460;
		text-align: center;
		letter-spacing: 2px;
		padding-top: 0.5rem;
		margin-bottom: 20px;
	}

	.mui-checkbox input[type='checkbox']:checked:before {
		color: #C9A460;
	}

	.bot span {
		font-size: 14px;
		color: #7A6542;
	}
</style>
